// 关闭时销毁
<template>
<p>启用此功能时，默认栏位下的内容将使用 <code>v-if</code> 指令销毁。 当出现性能问题时，可以启用此功能。</p>
<p>需要注意的是，当这个属性被启用时，在 <code>transition.beforeEnter</code> 事件卸载前，除了 <code>overlay</code>、<code>header (可选)</code>与<code>footer(可选)</code> ，Dialog 内不会有其它任何其它的 DOM 节点存在。</p>
  <el-button plain @click="centerDialogVisible = true">
    Click to open Dialog
  </el-button>

  <el-dialog
    v-model="centerDialogVisible"
    title="Notice"
    width="500"
    destroy-on-close
    center
  >
    <span>
      Notice: before dialog gets opened for the first time this node and the one
      bellow will not be rendered
    </span>
    <div>
      <strong>Extra content (Not rendered)</strong>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const centerDialogVisible = ref(false)
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>